<template>
	<div style="display: flex;justify-content: space-between;">
		<h3>课程管理</h3>
		<h3>
			<button @click="go2Add()">添加新课程</button>
		</h3>
	</div>
	<div style="position: relative;">
		<div style="border: 5px solid blue;position: absolute;z-index: 900;
		width: 40%;min-height: 15vw;left: 20%;top: 1vw;background-color: white;"
		v-if="data.addcour!=2">
			<hr>
			<h4>课程—添加</h4>
			<hr>
			<table width="80%" align="center" border="1"
			cellspacing="0" style="line-height: 35px;">
				<tr>
					<td>课程编号</td>
					<td><input type="text" v-model="data.cour.cno"></td>
				</tr>
				<tr>
					<td>课程名称</td>
					<td><input type="text" v-model="data.cour.cname"></td>
				</tr>
			</table>
			<hr>
			<div style="display: flex;justify-content: space-between;">
				<p>&nbsp;</p>
				<p><button @click="cancel()">取消</button></p>
				<p><button @click="save()">保存</button></p>
				<p>&nbsp;</p>
			</div>
		</div>
		
		<div style="width: 90%;border: 1px solid blue;">
			<table border="1" style="width: 95%;">
				<tr v-for="(x,idx) in data.cours">
					<td>{{x.cno}}</td>
					<td>{{x.cname}}</td>
					<td><button @click="go2Update(x.cno)">修改</button></td>
					<td><button @click="del(x)">删除</button></td>
				</tr>
			</table>
		</div>
	</div>
	
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
	import {$get,$postj} from '../../ajax';
	
	const data = reactive({
		addcour:2,  //0 添加  1 修改  2 显示
		cours:[],
		cour:{},
	})
	onMounted(()=>{
		$get("/api/adm/course/findAll")
		.then((resp)=>{
			console.log(resp.data.data)
			data.cours = resp.data.data;
		})
	})
	
	function cancel(){
		data.addcour = 2;
	}
	
	function go2Add(){
		data.addcour = 0;
		console.log(data.cour);
	}
	function go2Update(cno){
		data.addcour = 1;
		console.log(cno)
		$get("/api/adm/course/findOne/"+cno)
		.then((resp)=>{
			console.log(resp.data.data)
			data.cour = resp.data.data;
		})
	}
	
	function save(){
		let path = "";
		if(data.addcour == 0){
			path = "/add";
		}
		if(data.addcour == 1){
			path = "/update";
		}
		$postj("/api/adm/course"+path,data.cour)
		.then((resp)=>{
			console.log("resp.data.data")
			console.log(resp.data.data)
			data.cours = resp.data.data
		})
	}
	
	function del(cour){
		$get("/api/adm/course/del",cour)
		.then((resp)=>{
			console.log(resp.data.data)
			data.cours = resp.data.data
		})
	}
</script>


<style>
</style>
